<template>
    <div>
        <div class="mb-4">
        <el-button disabled>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success" text>Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </div>
      <div>
        <el-button :icon="Search" circle />
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="success" :icon="Check" circle />
        <el-button type="info" :icon="Message" circle />
        <el-button type="warning" :icon="Star" circle />
        <el-button type="danger" :icon="Tools" circle />
      </div>
    </div>
    </template>
    
    <script setup>
    import {
      Check,
      Delete,
      Edit,
      Message,
      Search,
      Star,
      Tools
    } from '@element-plus/icons-vue'
    </script>
    
    <style scoped>
    .el-button--danger {
      --el-button-bg-color:#333;
    }
    </style>